<template>
  <div class="pageContent">
    <div class="centerAll">
      <Table
        ref="xrTable"
        :list-api="list"
        :status-api="status"
        :table-column="tableColumn"
        :page-config="pageConfig"
        :table-config="tableConfig"
        @openViewForm="openViewForm"
        @openEditForm="openEditForm">
        <template v-slot:addBtn>
          <el-button type="success" @click="openCreateForm()">新增</el-button>
        </template>
      </Table>
    </div>
  </div>

  <el-dialog v-model="dialogFormVisible" :title="isRead ? '查看' : '新增'" width="860">
    <Form ref="xrForm" :table-column="tableColumn" :form-data="form" :is-read="isRead" />
    <template v-if="!isRead" #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { tableColumn, pageConfig, tableConfig } from './config'
import Table from '/src/components/Table/index.vue'
import Form from '/src/components/Form/index.vue'
import {
  list,
  update,
  create,
  status
} from '/src/api/baseInfo/disease'
import {
  ref,
  nextTick
} from 'vue'
const dialogFormVisible = ref(false)
const isRead = ref(false)
const form = ref({
  status: 1
})
const xrForm = ref()
const xrTable = ref()

const openCreateForm = () => {
  isRead.value = false
  dialogFormVisible.value = true
  nextTick(() => {
    form.value = { status: 1 }
    xrForm.value.ruleFormRef.resetFields()
  })
}
const openViewForm = (row) => {
  isRead.value = true
  dialogFormVisible.value = true
  form.value = { ...row }
  nextTick(() => {
    xrForm.value.ruleFormRef.clearValidate()
  })
}
const openEditForm = (row) => {
  isRead.value = false
  dialogFormVisible.value = true
  form.value = { ...row }
  nextTick(() => {
    xrForm.value.ruleFormRef.clearValidate()
  })
}

const submitForm = async () => {
  console.log(xrForm.value.ruleFormRef)
  if (!xrForm.value.ruleFormRef) return
  await xrForm.value.ruleFormRef.validate(async (valid, fields) => {
    if (valid) {
      if (form.value.id) {
        await update({...form.value})
      } else {
        await create({...form.value})
      }
      dialogFormVisible.value = false
      xrTable.value.resetFormParent()
    } else {
      console.log('error submit!', fields)
    }
  })
}

</script>

<style lang="scss" scoped>
</style>
